// 添加数据;
import { use, useState, Suspense } from "react";
import PropTypes from "prop-types";
function createPromise(value, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value);
    }, delay);
  });
}
function DisplayItem({ data }) {
  const result = use(data);
  return <li>{result}</li>;
}
DisplayItem.propTypes = {
  data: PropTypes.object.isRequired,
};
function ListDisplay({ promises }) {
  return (
    <ul>
      {promises.map((promise, index) => (
        <Suspense key={index} fallback={<div>loading....</div>}>
          <DisplayItem data={promise} />
        </Suspense>
      ))}
    </ul>
  );
}
ListDisplay.propTypes = {
  promises: PropTypes.arrayOf(PropTypes.object).isRequired,
};
// 添加数据
function App() {
  const [promises, setPromises] = useState(() => [
    createPromise("数据1", 1000),
  ]);
  return (
    <div>
      <h2>列表添加项目</h2>
      <ListDisplay promises={promises} />
      <button
        onClick={() => {
          setPromises([
            ...promises,
            createPromise(`数据${promises.length + 1}`, 1000),
          ]);
        }}
      >
        添加数据
      </button>
    </div>
  );
}
export default App;
//异步调用接口获取返回的数据进行渲染
